
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/test.css"/>
		<link rel="stylesheet" href="../css/iconfont.css" />
		
		<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css"/>
		
<script type="text/javascript"src="lib/bootstrap.js"></script>

		<!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->
		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			.mui-content{
				  position: absolute;  
        width: 100%;  
        height: 100%;  
        background: url(../images/QQ图片20180510160926.png) no-repeat;  
        background-size: 100%100%;  
			}
		</style>
	</head>

	<body>
		
	
		<div class="mui-content">
    <div class="mui-content-padded">
		  <p>
		  	<br /><br /><br /><br /><br />
		  
					<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-red mui-icon iconfont icon-car mui-right" style="padding: 5px 10px;">停车</a>
					<div id="">
						
					
			<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-center mui-icon iconfont icon-mapsigns mui-right" style="padding: 5px 10px;">取车</a>
					</div>
				</p>
				
				</div>
			</div>
			
		
			
					
				</div>
					
				</div>
				
			
					
				</li>
				
					
				</li>
			</ul>
			
					
				</li>
			</ul>
		</div>
		
		
		

	</div>
	
	</div>
	
		
	</div>
				<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
				<button type="button" id='showCityPicker' class="mui-btn mui-btn-block mui-icon mui-icon-forward mui-right" >点击选择发牌机关</button>
				<div id="cityResult">
					
				</div>
				<div class="am-list-line">
			<div class="am-input-label am-input-label-5"></div>
			<div class="am-input-control"><input id="number" maxlength="5" placeholder="请输入五位车牌号码" type="text" ></div>

	</div>
					<button type="button" id="msg2"class="mui-btn mui-btn-primary mui-btn-block">特殊车牌时请单击此项</a>
			<div id="info">

				</div>
					<button type="button"id="msg" class="mui-btn mui-btn-primary mui-btn mui-btn-block" onclick=""return true"">确认</button>
					</div>	
			</div>
			<!--
            	作者：1251270307@qq.com
            	时间：2018-05-11
            	描述：
           <div id="modal" class="mui-modal">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
					<h1 class="mui-title">华运智联</h1>
				</header>
				<div class="mui-content" style="height: 100%;width: 100%; ">
					<div class="am-input-control"><input  placeholder="请输入车牌号码" type="text" value="">
					
					<button type="button" id="msg2" class="mui-btn mui-btn-primary mui-btn mui-btn-block" onclick="return true">确认</button>
					<div id="info">

				</div> -->
					</div>
					

		</div>
		
			</div>
			<div id="picture"> <img src="../images/QQ图片20180510160926.png"  width="100%" height="100%"  >
				</div>
				</li>
				
			</ul>
			
		</div>
		
	</div>
	
	</div>
		
		<script src="../js/mui.min.js"></script>
		<!--<script src="../js/mui.picker.min.js"></script>-->
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/citydata2.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					
					//级联示例
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('showCityPicker');
					var cityResult = doc.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							cityResult.innerText = "你选择的车牌是:" + items[0].text + " " + items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
		
				});
			})(mui, document);
		</script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			</script>
		
			
	</body>
		<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		var info = document.getElementById("info");
	document.getElementById("msg2").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				mui.prompt('请输入你的车牌号：',    function(e) {
					if (e.index == 1) {
						info.innerText = '您输入的车牌号为：' + e.value;
					} else {
						info.innerText = '';
					}
					mui.alert(e.value);
				})
			});

		</script>
			<script type="text/javascript">
				mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		var info = document.getElementById("info");
	document.getElementById("msg").addEventListener('tap', function(e){
	
                mui.toast('提交成功');
            });
	
			</script>
			<script type="text/javascript">
					mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		
		var cityResult =document.getElementById("cityResult");
		var number =document.getElementById("number");
	
	document.getElementById("msg").addEventListener('tap', function(e){
		var number =mui("#number")[0].value;
		var cityResult =mui("#cityResult")[0].innerText;
		mui.alert(number);
		mui.alert(cityResult);
				mui.ajax('http://localhost:8080/PHP/hello.php',{
		data:{number:number,
			cityResult:cityResult
		     
	},
	dataType:'jJSONP',
	type:'post',
	timeout:10000,
	headers:{'Content-Type':'application/json'},
	 success  : function(data){
                 mui.alert("<网络连接失败，请重新尝试一下>", "错误", "OK", null); 
            },
            error    : function(xhr,type,errorThrown){
                mui.toast(error);
            }
        });
    });
	   
			</script>
				<script type="text/javascript">
					mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		
		var cityResult =document.getElementById("cityResult");
		var number =document.getElementById("number");
	
	document.getElementById("msg2").addEventListener('tap', function(e){
		var info =mui("#info")[0].innerText;
		
				mui.ajax('http://localhost:8080/PHP/hello.php',{
		data:{info:info
			
		     
	},
	dataType:'jJSONP',
	type:'post',
	timeout:10000,
	headers:{'Content-Type':'application/json'},
	 success  : function(data){
                 mui.alert("<网络连接失败，请重新尝试一下>", "错误", "OK", null); 
            },
            error    : function(xhr,type,errorThrown){
                mui.toast(error);
            }
           
        });
    });
	   
			</script>
			

</html>